<template>
    <div>
      <van-nav-bar title="销售合同" />
      <van-form>
        <van-cell-group inset>
        <div>
            <van-field
            v-model="contract.contractNum"
            name="合同编号"
            label="合同编号"
            placeholder="合同编号"
            :rules="[{ required: isEdit, message: '请填写合同编号' }]"
          />
          <van-field
            v-model="contract.status"
            name="状态"
            label="状态"
            placeholder="状态"
            :rules="[{ required: isEdit, message: '请填写状态' }]"
          />
        </div>
        <van-divider></van-divider>
        <div>
            <van-field
            v-model="contract.salesman"
            name="业务员"
            label="业务员"
            placeholder="业务员"
            :rules="[{ required: isEdit, message: '请填写业务员' }]"
          />
          <van-field
            v-model="contract.businessType"
            name="业务类型"
            label="业务类型"
            placeholder="业务类型"
            :rules="[{ required: isEdit, message: '请填写业务类型' }]"
          />    <van-field
            v-model="contract.contractTemplate"
            name="合同模板"
            label="合同模板"
            placeholder="合同模板"
            :rules="[{ required: isEdit, message: '请填写合同模板' }]"
          />    <van-field
            v-model="contract.contractType"
            name="合同类型"
            label="合同类型"
            placeholder="合同类型"
            :rules="[{ required: isEdit, message: '请填写合同类型' }]"
          />    <van-field
            v-model="contract.manageCategory"
            name="管理分类"
            label="管理分类"
            placeholder="管理分类"
            :rules="[{ required: isEdit, message: '请填写管理分类' }]"
          />    <van-field
            v-model="contract.customerName"
            name="需方"
            label="需方"
            placeholder="需方"
            :rules="[{ required: isEdit, message: '请填写需方' }]"
          />    <van-field
            v-model="contract.salesDept"
            name="销售部门"
            label="销售部门"
            placeholder="销售部门"
            :rules="[{ required: isEdit, message: '请填写销售部门' }]"
          />    <van-field
            v-model="contract.salesCustomerService"
            name="销售客服"
            label="销售客服"
            placeholder="销售客服"
            :rules="[{ required: isEdit, message: '请填写销售客服' }]"
          />

          <van-cell
            title="有效期从"
            :value="contract.effectiveDateFrom"
            @click="showFrom = true"
            :rules="[{ required: isEdit, message: '请填写有效期从' }]"
          />
          <van-calendar v-model="showFrom" :show-confirm="false" @confirm="onConfirmFrom" />
          <van-cell
            title="有效期至"
            :value="contract.effectiveDateTo"
            @click="showTo = true"
            :rules="[{ required: isEdit, message: '请填写有效期至' }]"
          />
          <van-calendar v-model="showTo" :show-confirm="false"  @confirm="onConfirmTo" />
          <van-cell
            title="计划回款日期"
            :value="contract.planPaymentDate"
            @click="showPlanPaymentDate= true"
            :rules="[{ required: isEdit, message: '请填写计划回款日期' }]"
          />
          <van-calendar v-model="showPlanPaymentDate" :show-confirm="false"  @confirm="onPlanPaymentDate" />
          <van-field
            v-model="contract.remark"
            name="备注"
            label="备注"
            placeholder="备注"
            :rules="[{ required: false, message: '请填写备注' }]"
          />
        </div>
        </van-cell-group>
      </van-form>
      <van-divider/>
      <div style="margin: 16px">
        <van-button  type="primary" @click="showLines()" style="margin-left: 0%; width: 30%;" >合同行</van-button>
        <van-button  type="primary" @click="showTerms()" style="margin-left: 40%; width: 30%;">合同条款</van-button>
      </div>
      <div style="margin: 16px">
        <van-button  type="primary" @click="saveContract()" style="margin-left: 0%; width: 30%;" >保存</van-button>
        <van-button  type="primary" @click="doCreate()" style="margin-left: 40%; width: 30%;">上传</van-button>
      </div>

    </div>


  </template>
  <script>
  import { Notify} from "vant";
  import{validateTime}from "@/utils/validate"
  import {createContract,saveContract} from "@/api/contract"
  import contract from "@/view/contract/index.vue";
  import {mapState} from "vuex";
  export default {
    data() {
      return {
        /*contract: {
          contactNum: "",
          status: "",
          salesman: "",
          businessType: "",
          contractTemplate:"",
          contractType:"",
          manageCategory:"",
          customerName:"",
          salesDept:"",
          salesCustomerService:"",
          effectiveDateFrom:"",
          effectiveDateTo:"",
          planPaymentDate:"2023-10-01",
          remark:"",
          contractLines:this.contractDetailList,
          contractTerms:this.contractTerms
        },*/

        showPlanPaymentDate:false,
        showFrom: false,
        showTo: false,
        //必填项
        isEdit: false,
      };
    },
    computed:{
      ...mapState({
        contract: state => state.ContractAbout.contract
      })
    },
    mounted() {
      if (JSON.stringify(this.$route.query) !== "{}"){
        // this.contract = this.$route.query;
      } else if (localStorage.getItem("contract") !== null){
        this.contract = JSON.parse(localStorage.getItem("contract"))
      }
    },
    methods: {
      formatDate(date) {
        return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      },
      onConfirmFrom(date) {
        this.showFrom = false;
        this.contract.effectiveDateFrom = this.formatDate(date);
      },
      onConfirmTo(date) {
        this.showTo = false;
        this.contract.effectiveDateTo = this.formatDate(date);
      },
      onPlanPaymentDate(date) {
        this.showPlanPaymentDate = false;
        this.contract.planPaymentDate = this.formatDate(date);
      },
      saveContract(){
        saveContract(this.contract).then((resp)=>{
          Notify("cg")
        })
      },
      saveToLocal(){
        localStorage.setItem("contract",JSON.stringify(this.contract))
      },
      showTerms(){
        this.$router.push("contractTerms")
      },
      showLines(){
        this.$router.push("contractDetail")
      }
    }
  }
  </script>

  <style>
  </style>
